<script>
import requestUtil from "@/utils/RequestUtil";
import { Toast } from "vant";

export default {
  name: "myCollection",
  data() {
    return {
      listData: [],
      size: 8,
      current: 1,
      num: 0,
      loading: false,
    };
  },
  methods: {
    load() {
      requestUtil({
        url: `/user/collection/${this.size}/${this.current}`,
        method: "get",
        headers: {
          token: this.$store.state.userInfo.token,
        },
      }).then((res) => {
        if (res.data.code === 1) {
          for (let i = 0; i < res.data.data.records.length; i++) {
            this.listData.push(res.data.data.records[i]);
          }
          this.num = res.data.data.total;
          this.current += 1;
        }
      });
    },
    onDelete(id) {
      console.log(id);
      requestUtil({
        url: "/user/collection/" + id,
        method: "delete",
        headers: {
          token: this.$store.state.userInfo.token,
        },
      }).then((res) => {
        if (res.data.code === 1) {
          this.num -= 1;
          this.listData = this.listData.filter((item) => item.storeId !== id);
          Toast({
            message: res.data.msg,
            type: "success",
          });
        }
      });
    },
    init() {
      if (!this.$store.state.userInfo) {
        this.$router.back();
      }
      this.load();
    },
    toProductDetail(productId) {
      console.log(productId);
    },
  },
  mounted() {
    this.init();
  },
};
</script>

<template>
  <van-list
    v-model="loading"
    :finished="listData.length === num"
    finished-text="没有更多了"
    @load="load"
  >
    <van-card
      id="myCard"
      v-for="item in listData"
      :key="item.id"
      @click="toProductDetail(item.productId)"
      :price="parseFloat(item.productPrice).toFixed(2)"
      :desc="item.productIntroduce"
      :title="item.productName"
      :thumb="item.productCarousel"
    >
    </van-card>
  </van-list>
</template>

<style scoped>
#myCard {
  background: rgb(255, 255, 255);
  color: #000;
  margin: 0;
}
#myCard .van-card__header {
  height: 150px;
}
#myCard .van-card__thumb {
  border-radius: 10px;
  background-color: #e8e8e8;
  width: 112px;
  height: 145px;
  margin-right: 20px;
}
#myCard .van-image__img {
  height: 145px;
}
#myCard .van-card__desc {
  font-size: 13px;
  color: #909399;
  line-height: 22px;
  max-height: 44px;
  height: 44px;
  margin: 12px 0;
  white-space: normal;
  display: block;
}
#myCard .van-card__title {
  font-size: 18px;
  line-height: 45px;
  white-space: nowrap;
  display: block;
}
#myCard .van-card__content {
  font-size: 18px;
  line-height: 45px;
}
#myCard .van-card__price {
  font-size: 18px;
  color: #fa436a;
  line-height: 45px;
}
#myCard .van-card__price-integer {
  font-size: 18px;
  color: #fa436a;
  line-height: 45px;
}
</style>
